<template>
  <div class="truename">
    <div class="titles">分账拨付统计</div>
    <el-row class="content">
      <el-col :span="4" v-for="item in accountData" :key="item.id">
        <div>
          <p class="title">
            {{ item.title }}
            <el-tooltip
              content="Top center"
              placement="top"
              effect="dark"
              v-if="isEsUser()"
            >
              <div slot="content">
                {{ item.tip }}
              </div>
              <i class="icon iconfont iconhuabanfuben"></i>
            </el-tooltip>
          </p>
          <p class="num">{{ item.value }}{{ item.unit }}</p>
        </div>
      </el-col>
    </el-row>
    <div class="chartPart">
      <div class="chartTitle">
        <el-tabs v-model="activename" @tab-click="handleClick" class="">
          <el-tab-pane label="专户按地区分布" name="area"></el-tab-pane>
          <el-tab-pane
            label="专户按行业分布"
            v-if="userType == 'MONITOR'"
            name="industry"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <div id="chartPart"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'truename',
  data() {
    return {
      intervals: 20,
      maxs: 100,
      option: {
        color: ['#6395FA', '#FFCC99', '#65DAAB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
          padding: [10, 12],
          formatter: function (val) {
            let value = val[0]
            return ` <p style='font-size:16px'>${value.name}</p>
                     <p style='height:22px;line-height: 22px;' > 
                    应开户总数：
                     ${value.value[1] + value.value[2]}</p>
                    <p style='height:22px;line-height: 22px' > 
                    <span style='display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color: #6395FA;'></span>
                    已开户：${value.value[1]}</p>
                    <p style='height:22px;line-height: 22px' > 
                    <span style='display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color: #FFCC99;'></span>
                    未开户：${value.value[2]}</p>
                    <p style='height:22px;line-height: 22px'> 
                    <span style='display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color: #65DAAB;'></span>
                    开户率：${value.value[3]}%</p>`
          },
        },
        grid: {
          top: '94',
          left: '40',
          right: '40',
          bottom: '15',
          containLabel: true,
        },
        dataset: {},
        legend: [
          {
            top: 10,
            right: 160,
            itemWidth: 10,
            itemHeight: 10,
            data: [
              {
                name: '已开户',
              },
            ],
          },
          {
            top: 10,
            right: 100,
            itemWidth: 10,
            itemHeight: 10,
            data: [
              {
                name: '未开户',
              },
            ],
          },
          {
            top: 10,
            right: 30,
            itemWidth: 20,
            itemHeight: 10,
            data: [
              {
                name: '开户率',
              },
            ],
          },
        ],
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false,
            },
            axisPointer: {
              type: 'shadow',
            },
            axisLabel: {
              padding: [10, 0, 0, 0],
            },
            splitLine: {
              lineStyle: {
                color: '#416180',
                width: 0.5,
                opacity: 0.15,
              },
            },
            axisLine: {
              lineStyle: {
                color: '#485465',
                opacity: 0.15,
                width: 0.5,
                fontSize: 12,
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：个',
            axisTick: {
              show: false,
            },
            nameLocation: 'left',
            splitNumber: 5,
            interval: this.intervals,
            max: this.maxs,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#A0A4AA',
                opacity: 0.15,
                width: 0.5,
              },
            },
            splitLine: {
              lineStyle: {
                color: '#416180',
                opacity: 0.15,
                width: 0.5,
              },
            },
            axisLabel: {
              formatter: '{value}',
            },
          },
          {
            type: 'value',
            name: '开户率',
            min: 0,
            max: 100,
            interval: 20,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#A0A4AA',
                width: 0.5,
              },
            },
            splitLine: {
              lineStyle: {
                color: '#416180',
                opacity: 0.15,
                width: 0.5,
              },
            },
            axisLabel: {
              formatter: '{value} %',
            },
          },
        ],
        series: [
          {
            name: '已开户',
            type: 'bar',
            stack: 'Ad',
            barWidth: 20,
          },
          {
            name: '未开户',
            type: 'bar',
            stack: 'Ad',
            barWidth: 20,
          },
          {
            name: '开户率',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 1, //设置线条粗细
                },
              },
            },
          },
        ],
      },
      activename: 'area',
      accountData: [
        {
          title: '专户开设总数',
          tip: `录入专户账号且能与银行返回专户数据匹配的${
            this.isYcUser() ? '' : '已开工'
          }项目总数`,
          unit: '',
          id: 'accountTotal',
          value: '0',
        },
        {
          title: '专户开设比例',
          tip: '已开工项目中，录入专户账号且能与银行返回专户数据匹配的项目占比',
          unit: '',
          id: 'accountOpenedPercent',
          value: '0',
        },
        {
          title: '专户缴存总额',
          tip: `录入专户账号且能与银行返回专户数据匹配的${
            this.isYcUser() ? '所有' : '已开工'
          }项目，工资专户缴存总额`,
          unit: '万元',
          id: 'accountPaidTotalStr',
          value: '',
        },
        {
          title: '专户缴存余额',
          tip: `录入专户账号且能与银行返回专户数据匹配的${
            this.isYcUser() ? '所有' : '已开工'
          }项目，工资专户缴存余额`,
          unit: '万元',
          id: 'balanceStr',
          value: '',
        },
        {
          title: '专户足额缴存比例',
          tip: '已开工项目中，工资专户足额缴存项目占比',
          unit: '',
          id: 'accountDepositPercent',
          value: '',
        },
        {
          title: '本月新增专户',
          tip: `当前自然月1号至当前日期，录入专户账号且能与银行返回专户数据匹配的${
            this.isYcUser() ? '' : '已开工'
          }项目数`,
          unit: '',
          id: 'monthAddedAccountTotalStr',
          value: '',
        },
      ],
    }
  },
  props: ['areaId', 'userType'],
  watch: {
    areaId() {
      this.getaccountData(this.activename)
    },
  },
  mounted() {
    if (this.isYcUser()) {
      // 宜昌定制需求
      this.accountData.splice(1, 1)
      this.accountData.splice(3, 1)
    }
    if (this.isEsUser()) {
      this.accountData.splice(4, 1)
    }
    this.getaccountData(this.activename)
  },
  methods: {
    handleClick(val) {
      this.activename = val.name
      this.getaccountData(this.activename)
    },
    initChart() {
      var chartDom = document.getElementById('chartPart')
      var myChart = this.$echarts.init(chartDom)
      myChart.setOption(this.option)

      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    getaccountData(type) {
      let url = 'api-p/projectstats/expand/accbyarea'
      if (type === 'industry') {
        url = 'api-p/projectstats/expand/projectaccountchart'
      }
      this.axios.post(url, { areaId: this.areaId }).then((res) => {
        if (!res.data.hasError) {
          this.accountData.map((obj, key) => {
            obj.value = res.data.result.detail[obj.id]
          })

          const { area, data, industry } = res.data.result

          this.getMax(data)
          if (this.activename == 'area') {
            data.forEach((item, index) => {
              item.unshift(area[index])
            })
            data.unshift(area)
          } else {
            data.forEach((item, index) => {
              item.unshift(industry[index])
            })
            data.unshift(industry)
          }
          this.option.dataset.source = data
          this.initChart()
        } else {
          this.$message({
            message: res.data.errorMsg,
            type: 'error',
          })
        }
      })
    },
    getMax(arr) {
      let curArr = []
      arr.forEach((item) => {
        curArr.push(item[0] + item[1])
      })
      curArr.sort(function (a, b) {
        return b - a
      })
      let maxNum = curArr[0]
      let fang = (maxNum + '').length - 1
      let curNum = maxNum / (Math.pow(10, fang) * 5)
      let singleNum = Math.ceil(curNum * 1)
      this.intervals = singleNum * Math.pow(10, fang)
      this.maxs = this.intervals * 5

      let options = [
        {
          type: 'value',
          name: '单位：个',
          axisTick: {
            show: false,
          },
          nameTextStyle: {
            padding: [0, 0, 10, -30],
          },
          splitNumber: 5,
          interval: singleNum * Math.pow(10, fang),
          max: singleNum * Math.pow(10, fang) * 5,
          axisLine: {
            lineStyle: {
              color: '#A0A4AA',
              opacity: 0.15,
              width: 0.5,
            },
          },
          splitLine: {
            lineStyle: {
              color: '#416180',
              opacity: 0.15,
              width: 0.5,
            },
          },
          axisLabel: {
            formatter: '{value}',
          },
        },
        {
          type: 'value',
          name: '开户率',
          nameTextStyle: {
            padding: [0, -40, 10, 0],
          },
          min: 0,
          max: 100,
          interval: 20,
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#A0A4AA',
              opacity: 0.15,
              width: 0.5,
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#416180',
              opacity: 0.15,
              width: 0.5,
            },
          },
          axisLabel: {
            formatter: '{value} %',
          },
        },
      ]
      this.$set(this.option, 'yAxis', options)
    },
  },
}
</script>

<style lang="less" scoped>
.truename {
  margin-top: 10px;

  background-color: #fff;
  .titles {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e3e7e9;
    padding: 0 16px;
    color: #333;
    font-size: 16px;
    font-weight: 700;
  }
  .content {
    height: 104px;
    padding: 16px 8px;
    .el-col {
      padding: 0 8px;
      div {
        width: 100%;
        height: 72px;
        background: #f5f7fb;
        border-radius: 4px;
        .title {
          font-size: 14px;
          padding-top: 14px;
          height: 28px;
          line-height: 14px;
          color: #666;
          text-align: center;
        }
        .num {
          margin-top: 10px;
          height: 22px;
          line-height: 22px;
          font-size: 18px;
          color: #6395fa;
          text-align: center;
          font-weight: 700;
        }
      }
    }
  }
  .chartPart {
    border-top: 1px solid #e3e7e9;
    position: relative;
    z-index: 10;
    height: 313px;
    width: 100%;
    &::after {
      position: absolute;
      content: '';
      left: 0;
      right: 0;
      top: 40px;
      height: 1px;
      width: 100%;
      background-color: #e3e7e9;
      z-index: 12;
    }
    #chartPart {
      height: 313px;
      width: 100%;
    }
    .chartTitle {
      position: absolute;

      width: 50%;
      // right: 0;
      top: 0;
      left: 0;
      height: 40px;
      z-index: 11;

      padding: 0 16px;
    }
  }
}
/deep/.el-tabs__header {
  margin-bottom: 0;
  //  padding: 0 16px;
  height: 40px;
  .el-tabs__nav-wrap {
    height: 40px;
    .el-tabs__nav-scroll {
      height: 40px;
      line-height: 40px;
    }
  }
}
/deep/.el-tabs__item {
  height: 40px;
  line-height: 40px;
}
/deep/.el-tabs__nav-wrap::after {
  height: 0px;
  background-color: none;
}
/deep/ .el-tabs__active-bar {
  background-color: #409eff !important;
}
</style>
>
